<template>
  <el-tabs v-loading="loading" type="border-card" class="tabs-1" @tab-click="UpdateTable">
    <el-tab-pane label="本支部">
      <el-table :data="TableData_local" class="tab" border>
        <el-table-column label="序号" type="index" fixed="left" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会议名称" prop="confname" width="150" />
        <el-table-column label="主持人" prop="host" width="120" />
        <el-table-column label="日期" prop="time" width="150" />
        <el-table-column label="地点" prop="confpl" width="150" />
        <el-table-column label="出席人" prop="partic" width="300" />
        <el-table-column label="缺席人" prop="nopartic" width="300" />
        <el-table-column label="基本情况" prop="cont" width="400" />
        <el-table-column v-if="optioncol" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :pagesetting.sync="page" :total-count="totalCount" />
    </el-tab-pane>
    <el-tab-pane :label="BrowerCompany">
      <CompanySelector />
      <el-table :data="TableData_else" class="tab" border>
        <el-table-column label="序号" type="index" fixed="left" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会议名称" prop="confname" width="150" />
        <el-table-column label="主持人" prop="host" width="120" />
        <el-table-column label="日期" prop="time" width="150" />
        <el-table-column label="地点" prop="confpl" width="150" />
        <el-table-column label="出席人" prop="partic" width="300" />
        <el-table-column label="缺席人" prop="nopartic" width="300" />
        <el-table-column label="基本情况" prop="cont" width="400" />
      </el-table>
      <Pagination :pagesetting.sync="page" :total-count="totalCount" />
    </el-tab-pane>
    <!-- 添加组织生活会信息 -->
    <el-button type="button" @click="handleAdd">添加组织生活会</el-button>
    <el-dialog v-if="dialogFormVisible" :title="formTitle" :visible.sync="dialogFormVisible">
      <el-form ref="zzsh_form" :model="zzsh_form" :rules="formrules">
        <el-form-item label="会议名称" prop="confname">
          <el-input v-model="zzsh_form.confname" />
        </el-form-item>
        <el-form-item label="主持人" prop="host">
          <el-input v-model="zzsh_form.host" />
        </el-form-item>
        <el-form-item label="会议日期" prop="time">
          <el-date-picker
            v-model="zzsh_form.time"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="会议地点" prop="confpl">
          <el-input v-model="zzsh_form.confpl" />
        </el-form-item>
        <el-form-item label="出席人" prop="partic">
          <el-select v-model="zzsh_form.partic" multiple placeholder="请选择">
            <el-option
              v-for="(item,index) in userslist"
              :key="index"
              :label="item.value.concat('、')"
              :value="item.value.concat('、')"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="缺席人" prop="nopartic">
          <el-input v-model="zzsh_form.nopartic" />
        </el-form-item>
        <el-form-item label="基本情况" prop="cont">
          <el-input v-model="zzsh_form.cont" type="textarea" height="200" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('zzsh_form')">立即提交</el-button>
          <el-button @click="resetForm('zzsh_form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-tabs>
</template>
<script>
import {
  getZzshInfo,
  deleteZzshInfo,
  updateZzshInfo,
  postZzshInfo,
  getUsersList
} from '@/api/zzxt'
export default {
  name: 'Zzsh',
  components: {
    Pagination: () => import('@/components/Pagination'),
    CompanySelector: () => import('@/components/Company/CompanySelector')
  },
  data: () => ({
    loading: false,
    TableData_local: [],
    TableData_else: [],
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: 0,
    TabTop: { index: '0' },
    userslist: [{ value: '1' }, { value: '2' }],
    query_api: {
      conditionnum: '1',
      condition: ['companyId'],
      value: ['local'],
      pagenum: '',
      companyid: ''
    },
    isEdit: false,
    optioncol: true,
    BrowerCompany: '其他支部',
    dialogFormVisible: false,
    zzsh_form: {},
    formTitle: '添加组织生活会',
    formrules: {
      confname: [
        { required: true, message: '请输入会议名称', trigger: 'blur' }
      ],
      host: [{ required: true, message: '请输入主持人', trigger: 'blur' }],
      time: [{ required: true, message: '请选择日期', trigger: 'blur' }],
      confpl: [{ required: true, message: '请输入地点', trigger: 'blur' }],
      partic: [{ required: true, message: '请输入出席人', trigger: 'blur' }],
      cont: [{ required: true, message: '请输入基本情况', trigger: 'blur' }]
    }
  }),
  watch: {
    page: {
      handler(val) {
        this.ReTableData()
      },
      deep: true
    }
  },
  mounted() {
    this.refresh()
    getUsersList().then(data => {
      this.userslist = data
    })
  },
  methods: {
    refresh() {
      const page = this.page
      getZzshInfo(Object.assign(this.query_api, { page })).then(data => {
        this.totalCount = data.totalCount
        this.TableData_local = data.list
      })
    },
    // 后续可能在这里添加提交表单后刷新的问题
    UpdateTable(tab) {
      debugger
      this.TabTop = tab
      this.page = { pageIndex: 0, pageSize: 10 }
      this.ReTableData()
    },
    ReTableData() {
      const page = this.page
      const tabIndex = this.TabTop.index
      if (tabIndex === '0') {
        this.query_api.value = ['local']
        getZzshInfo(Object.assign(this.query_api, { page })).then(data => {
          this.totalCount = data.totalCount
          this.TableData_local = data.list
        })
      } else {
        this.query_api.value = ['else']
        getZzshInfo(Object.assign(this.query_api, { page })).then(data => {
          this.totalCount = data.totalCount
          this.TableData_else = data.list
        })
      }
    },
    submitForm(ruleform) {
      this.loading = true
      this.$refs[ruleform].validate(valid => {
        if (valid) {
          if (this.isEdit === true) {
            updateZzshInfo(this.zzsh_form)
              .then(data => {
                this.$message.success('修改成功')
              })
              .finally(() => {
                this.loading = false
              })
          } else {
            this.zzsh_form['id'] = this.totalCount + 1
            postZzshInfo(this.zzsh_form)
              .then(data => {
                this.ReTableData()
                this.$message.success('添加成功')
              })
              .finally(() => {
                this.loading = false
              })
          }
          this.dialogFormVisible = false
        } else {
          this.$message.error('提交错误')
          this.loading = false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleEdit(formdata) {
      this.isEdit = true
      this.formTitle = '编辑组织生活会活动信息'
      this.zzsh_form = formdata
      this.dialogFormVisible = true
    },
    handleAdd() {
      this.isEdit = false
      this.formTitle = '添加组织生活会'
      this.zzsh_form = {}
      this.dialogFormVisible = true
    },
    handleDelete(row) {
      this.loading = true
      this.$confirm('确认删除？').then(_ => {
        deleteZzshInfo(row.name, row.time).then(data => {
          this.$message.success('成功删除')
          this.ReTableData()
        })
      })
      this.loading = false
    }
  }
}
</script>
